<template>
<div>
<div class="total">
  
   <div class="left">
    <div class="imgcontainer">
    <div class="inner">
    <img :src="piccUrl" ref="cdd" class="picadd"/>
    </div>
     <div class="head">
    <p class="gename">{{name}}</p>
    <p class="sinname">{{singer}}</p>
    </div>
    </div>
  </div>
  <div class="right">
   
    <div class="lyricstyle">
      <ul ref="lyricUL" >
        <li v-for="(item,i) in lyricsObjArr" :key="item.uid" ref="lyric" :class="[lyricIndex === i ? 'nomalclass ' : 'ppp']"  :data-index='i' >
          {{item.lyric}}
        </li>
       
      </ul>
    </div>
  </div>
 
</div>
<div class="comment">
</div>
</div>

</template>
<script>
export default {
  data(){
    return{
      singer:"",
      name:"",
      piccUrl:'',
      didplay:true,
      lyricsObjArr:[],
      lyrics:{},
      lyricIndex:'0'//当前的歌词
    }
   
  }, 
 props:['isplay','timelist','musicid'],
  created(){
    
   this.getDetail();
   this.getLyrics();
  },
  watch:{
    isplay(oldi,newi){
        if(newi===false){
        this.$refs.cdd.classList.add('rotate');
        if (this.$refs.cdd.classList.contains('Pause')) this.$refs.cdd.classList.remove('Pause')
      }else{
        this.$refs.cdd.classList.add('Pause')
      }
    },
    timelist(newi){
    

      for (let i = 0; i < this.lyricsObjArr.length; i++) {
        
        if (newi> (this.lyricsObjArr[i].time)) {
          const index = this.$refs.lyric[i].dataset.index
          if (i === parseInt(index)) {
            this.lyricIndex = i
             this.$refs.lyricUL.style.transform = `translateY(${170 - (40 * (i + 1))}px)`
          }
        }
      }

    },
    musicid(newi){
      console.log(newi)
      this.$router.push('/musicdetail/'+newi);
      
    }

  },
  mounted(){
this.Animationn();
  },
  methods:{
    getDetail(){
      this.$axios.get(this.api+'/song/detail',{
        params:{
          ids:window.sessionStorage.getItem('geid')
        }
      }).then((res)=>{
        this.singer=res.data.songs[0].ar[0].name;
        this.name=res.data.songs[0].name;
        this.piccUrl=res.data.songs[0].al.picUrl;
      })
    },
    // 控制动画的旋转
    Animationn(){
    
      if(this.isplay===true){
        this.$refs.cdd.classList.add('rotate');
        if (this.$refs.cdd.classList.contains('Pause')) this.$refs.cd.classList.remove('Pause')
      }else{
        this.$refs.cd.classList.add('Pause')
      }
    },
    getLyrics(){
      this.$axios.get(this.api+"/lyric",{
        params:{
          id:this.$route.params.id
        }
      }).then((res)=>{
        console.log(res);
          if (res.data.code ===200) {
          if (res.data.needDesc) { // 当前歌曲没有歌词
            this.lyricsObjArr = [
              { time: 0, lyric: '纯音乐，请欣赏！', uid: 666666 }
              
            ]
          } else {
            const lyrics = {}
            lyrics.lyric = res.data.lrc.lyric
            lyrics.tlyric = res.data.tlyric.lyric
            this.lyrics = lyrics
            // 解析歌词
            this.analysisLyrics(this.lyrics)
          }
        }else{
          this.$message.error("服务器请求歌词失败！请重试")
        }

      })
    },
    // 解析歌词
   analysisLyrics (lyrics) { // 解析歌词
      const olyrics = lyrics.lyric
      this.lyricsObjArr = this.lyric2ObjArr(olyrics)
    },
     lyric2ObjArr (lyric) {
      const regNewLine = /\n/
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/
      const lineArr = lyric.split(regNewLine) // 每行歌词的数组
      const lyricsObjArr = [] // 歌词对象数组 [{time: '', lyric: ''}]
      lineArr.forEach(item => {
        if (item === '') return
        const obj = {}
        const time = item.match(regTime)
        obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim()
        obj.time = time ? this.formatLyricTime(time[0].slice(1, time[0].length - 1)) : 0
        obj.uid = Math.random().toString().slice(-6)
        if (obj.lyric === '') {
          console.log('这一行没有歌词')
        } else {
          lyricsObjArr.push(obj)
        }
      })
      return lyricsObjArr
    },
 formatLyricTime (time) { // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/
      const regSec = /:.*\./
      const regMs = /\./
      const min = parseInt(time.match(regMin)[0].slice(0, 2))
      let sec = parseInt(time.match(regSec)[0].slice(1, 3))
      const ms = time.slice(time.match(regMs).index + 1, time.match(regMs).index + 3)
      if (min !== 0) {
        sec += min * 60
      }
      return Number(sec + '.' + ms)
    },
  }
}
</script>
<style scoped>
/* 左侧的图片部分 */
.total{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items:flex-start;
  height: 500px;
  /* background-color: darkcyan; */
  overflow: hidden;
}
.right{
  flex: 1;
  display: flex;
  flex-direction: column;
  /* background-color: beige; */
}
.nomalclass{
  font-size: 20px;
  color: red;
}
.ppp{
  color: #333333;
}
.left{
  height: 500px;
  border-right: 2px solid rgb(216, 44, 44);
  flex: 1;
  /* background-color: aqua; */
}


.inner{

  height: 25%;
  width: 35%;
  /* background-color: rgb(136, 36, 36); */
  margin:auto;
  
}
.inner img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
/* 动画 */
/* .inner img{
  animation: rotateIMG 15s linear infinite;
} */
.rotate{
   animation: rotateIMG 15s linear infinite;
}
.Pause {
 animation-play-state:paused;
  -webkit-animation-play-state:paused; 
}
@keyframes rotateIMG{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.head{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.gename{
  flex: 1;
  line-height: normal;
  font-size: 20px;
}
.sinname{
  flex: 1;
  line-height: 0px;
  font-size: 15px;
}
ul{
  list-style: none;
  /* background-color: rgb(214, 196, 196); */
  height: auto;
  /* overflow: hidden; */
}
li{
  /* background-color: blueviolet; */
  line-height: 40px;
   overflow: hidden;
}
</style>